<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户--添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css">


    <script src="/manage/js/app.js"></script>
    <!-- 文件上传插件 -->
    <link rel="stylesheet" href="/components/cropper/css/cropper.css" media="all">
    <link rel="stylesheet" href="/components/cropper/css/publish.css" media="all">
    <script src="/components/cropper/js/croppers.js"></script>
    <script src="/components/cropper/js/move.js"></script>
    <script src="/components/cropper/js/publishImg.js"></script>
    <script src="/components/cropper/js/cropper.js"></script>
    <!-- 文件上传插件 -->
</head>
<body>
<style type="text/css">
    .divX {
        z-index: 200;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        line-height: 10px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        font-size: 10px;
        display: none;
    }
</style>


<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">


    <div class="layui-form-item">
        <label class="layui-form-label">Code</label>
        <div class="layui-input-inline">
            <input type="text" id="code" name="code" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- ------------------- 根据单选选填 start -------------------------  -->
    <div id="isType" class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div id="isType2" class="layui-input-block">
            <input type="radio" name="type" value="0" title="文本" lay-filter="type" checked="">
            <input type="radio" name="type" value="1" title="图片" lay-filter="type">
        </div>
    </div>

    <div id="contentText" class="layui-form-item">
        <label class="layui-form-label">配置内容</label>
        <div class="layui-input-block">
            <textarea id="content" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div id="contentImg" class="layui-form-item">
        <!--        <label class="layui-form-label">文件上传</label>-->
        <!--        <div class="layui-upload">-->
        <!--            <button type="button" class="layui-btn" id="test2">多图片上传</button>-->
        <!--            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;margin-left: 5%">-->
        <!--                预览图：-->
        <!--                <div class="layui-upload-list" id="demo2"></div>-->
        <!--            </blockquote>-->
        <!--            -->
        <!--        </div>-->
        <!-- 文件上传插件 -->
        <div class="layui-tab layui-tab-card">
            <div class="layui-form" style="padding: 20px 0 0 0;">
                <div class="layui-form-item">
                    <label class="layui-form-label">图片上传</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="addZmImg">多图片上传</button>
                    </div>
                </div>
                <ul id="imgZmList"></ul>
            </div>
        </div>
        <div id="cropperdiv"></div>
        <!-- 文件上传插件 -->
    </div>

    <!-- --------------------- 根据单选选填 end  -------------------------  -->
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" id="sort" name="sort" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>

    layui.use(['form', 'upload'], function () {
        init();
        formUpload();
        formRadio();
        formSubmit();
    });


    function init() {
        <!-- 父页面的值,赋值到当前页 -->
        $('#code').val(parent.data.code);
        $('#name').val(parent.data.name);
        $('#content').val(parent.data.content);
        $('#sort').val(parent.data.sort);
        // radio回显, type选中
        $("input[name=type]").each(function () {
            if ($(this).val() == parent.data.type) {
                $(this).attr("checked", true);
            }
        });
        if (parent.data.type === 0) {
            // 回显内容
            $("#contentText").show();
            $("#contentImg").hide();
        } else if (parent.data.type === 1) {
            $("#contentText").hide();
            $("#contentImg").show();
            // 图片回显
            let imgsArray = parent.data.content.split(",");
            let imgHtml = "";
            for (let i = 0; i < imgsArray.length; i++) {
                imgHtml += '<li style="position:relative"><img name="imgZmList" src="' + imgsArray[i] +
                    '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>';
            }
            $('#imgZmList').html(imgHtml);
            //可移动
            imgMove("imgZmList");
        }
        // 刷新,否则select可能不生效
        layui.form.render();
    }


    function formSubmit() {
        //监听提交
        layui.form.on('submit(layuiadmin-app-form-submit)', function (data) {
            if (data.field.type === "0") {
            } else {
                //图片 -> 获取图片
                let urls = getPicSort("imgZmList");
                data.field.content = urls;
            }
            //data.field.id = parent.data.id;
            let result = Ajax.put(parent.configUrl + "/" + parent.data.id, data.field);
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.layer.msg(result.msg);
            //重载表格
            parent.xijiaRenderTable();
        });
    }


    /**
     * 编辑选中展示图片还是文本
     */
    function formRadio() {

        layui.form.on('radio(type)', function (data) {
            if ($('#isType input[name="type"]:checked ').val() === "0") {
                $("#contentText").show();
                $("#contentImg").hide();
            } else {
                $("#contentText").hide();
                $("#contentImg").show();
            }
            layui.form.render();
        });
    }

    /**
     *多图片上传( addZmImg 支持图片删除,剪辑重传)
     */
    function formUpload() {
        layui.upload.render({
            elem: '#addZmImg'
            , url: uploadPath + '?filePath=image/config/'
            , multiple: true
            , headers: {"TOKEN": getGlobalHeaders()}
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     $('#imgZmList').append('<li style="position:relative"><img name="imgZmList" src="' + result + '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>');
                //     form.render();
                //     imgMove("imgZmList");
                // });
            }
            , done: function (result) {
                //上传完毕
                //layer.msg(res.msg);
                console.log("上传文件：" + result.data + "  结果:" + result.msg);

                $('#imgZmList').append('<li style="position:relative"><img name="imgZmList" src="' + result.data + '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>');
                layui.form.render();
                imgMove("imgZmList");
            }
        });
    }
</script>
</body>
</html>
